<template>
  <div>
    <el-button type="info" size="small" @click="back" :style="styleBtnBack">
      <i class="fa fa-fw fa-long-arrow-left"></i>返回列表
    </el-button>
    <span class="title">{{ realTitle }}</span>
  </div>
</template>
<script>
import { bus } from '@/bus.js';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'liveHeader',
  mixins: [], //混入
  components: {}, //组件
  props: {
    title: {
      type: String,
      default: '直播间标题',
    },
  }, //集成属性
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      visibilityBtnBack: true,
    };
  },
  computed: {
    ...mapState(['objRoom']),
    styleBtnBack: function() {
      let _ = this._;
      console.log(this.visibilityBtnBack);
      return {
        visibility: this.visibilityBtnBack ? 'visible' : 'hidden',
      };
    },
    realTitle: function() {
      let _ = this._;
      let title = _.get(this.objRoom, 'roomName', '直播间');
      return title;
    },
  },
  methods: {
    ...mapMutations([]),
    back: function() {
      this.$emit('back');
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.$nextTick(() => {
      let vbb = _.get(this.$route.query, 'disabledBtnBack', 1);
      this.$set(this, 'visibilityBtnBack', Boolean(Number(vbb)));
    });
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
<style lang="less" scoped>
.title {
  color: var(--color-text-default, #b6c2cf);

  /* 16/中-700 */
  font-family: 'PingFang SC';
  font-size: var(--Font-Size-16, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--Line-Height-16, 24px); /* 150% */
  padding-left: 8px;
}
</style>
